<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖动上传</title>
	<link rel="stylesheet" type="text/css" href="./dist/basic.css">
	<link rel="stylesheet" type="text/css" href="./dist/dropzone.css">
</head>
<body>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<div id="dropz" class="dropzone"></div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="./dist/dropzone.js"></script>

	<script type="text/javascript">
		
		Dropzone.autoDiscover = false;

		$("#dropz").dropzone({ 
			url: "./upload.php",
			method:"post",
			addRemoveLinks: true,
	        maxFiles: 1,
	        maxFilesize: 10,
	        dictDefaultMessage:"将文件拖至此处或点击上传.",
	        acceptedFiles: "image/*,.mp4",
	        dictFileTooBig:"文件过大，请控制在10M以内",
	        dictInvalidInputType:"你不能上传该类型文件,文件类型只能是*.jpg,*.gif,*.png",
	        dictMaxFilesExceeded:"您最多只能上传1个文件，请先删除", 
	        dictRemoveFile: "重新上传",
        	dictCancelUpload: '取消上传',
	        init: function() {
	        	// 添加了一个文件时发生
		        this.on("addedfile", function(file) {
		            console.log(1);
		        });
		        // 文件成功上传之后发生，第二个参数为服务器响应,可以把返回路径放到隐藏域
		        this.on("success", function(file) {
	                console.log("File " + file.name + "uploaded");
	            });
		        this.on("maxfilesreached", function(file) {
		            console.log('当文件数量达到最大时发生')
		        });
		        //删除文件时触发的方法
		        this.on("removedfile",function(file){
                	// $.ajax({
	                //   	url: "改成你的php删除图片的路径",
	                //   	type: "post",

	                //   	//file.path可以获取到点击删除按钮的那张图片
	                //   	data: { 'path': file.path }
	                // });

                });
		    }
		});
	</script>
</body>
</html>